<template>
    <div class="container">
        <!-- 管理平台--主体列表展示 -->
        <div class="dictmanageMain">
            <el-row>
                <el-form
                    :inline="true"
                    :model="formData"
                    class="demo-form-inline"
                    style="width: 49%;margin-bottom: 16px;display: inline-block;"
                    size="small"
                >
                    <el-form-item label="字典编码">
                        <el-input v-model="formData.dictValue" placeholder="请输入字典编码"></el-input>
                    </el-form-item>
                    <el-form-item label="字典名称">
                        <el-input v-model="formData.dictName" placeholder="请输入字典名称"></el-input>
                    </el-form-item>
                    <div>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            @click="hanlesearch"
                            :loading="searchLoading"
                            class="searchBtn"
                        >查询</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-refresh-right"
                            @click="handleReset"
                            :loading="resetLoading"
                            class="resetBtn"
                        >重置</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-circle-plus-outline"
                            @click="hanlePush"
                        >新增</el-button>
                    </div>
                </el-form>
                <el-form
                    :inline="true"
                    :model="formDataDetail"
                    class="demo-form-inline"
                    style="margin-bottom: 16px;width: 50%;display: inline-block;margin-left: 1%;"
                    size="small"
                >
                    <el-form-item label="名称">
                        <el-input v-model="formDataDetail.label" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="值">
                        <el-input v-model="formDataDetail.code" placeholder="请输入值"></el-input>
                    </el-form-item>
                    <div>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-search"
                            @click="hanlesearchDetail"
                            class="searchBtn"
                        >查询</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-refresh-right"
                            @click="handleResetDetail"
                            class="resetBtn"
                        >重置</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-circle-plus-outline"
                            @click="hanlePushDetail"
                        >新增</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-delete"
                            @click="hanleBatchDeleteDetail"
                        >删除</el-button>
                        <el-button type="primary" size="small" @click="clickImport">导入</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            icon="el-icon-download"
                            @click="downloadFile"
                        >点击下载模板</el-button>
                    </div>
                </el-form>
                <el-col :span="12" style="padding-right: 16px;">
                    <el-table
                        :data="tableData"
                        width="100%"
                        border
                        stripe
                        highlight-current-row
                        @row-click="handleClick($event, true)"
                        class="heard-bg"
                    >
                        <el-table-column label="序号" type="index" width="70px"></el-table-column>
                        <el-table-column label="字典编码" prop="dictValue"></el-table-column>
                        <el-table-column label="字典名称" prop="dictName"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    circle
                                    @click="handleEdit(scope.row)"
                                />
                                <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    circle
                                    @click="handleDelete(scope.row)"
                                />
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="pagination">
                        <Pagination
                            :hanleChangeCurrentPage="hanleChangeCurrentPage"
                            :handleChangeSize="handleChangeSize"
                            :currentPage="currentPage"
                            :pageSize="pageSize"
                            :total="total"
                        />
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-table
                        :data="tableDataDetail"
                        width="100%"
                        border
                        stripe
                        @selection-change="handleSelectChange"
                        class="heard-bg"
                    >
                        <el-table-column width="55" type="selection"></el-table-column>
                        <!-- <el-table-column label="序号" type="index"></el-table-column> -->
                        <el-table-column label="字典编码" prop="dictValue"></el-table-column>
                        <el-table-column label="名称" prop="label"></el-table-column>
                        <el-table-column label="值" prop="code"></el-table-column>
                        <!-- <el-table-column label="描述" prop="remark"></el-table-column> -->
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    circle
                                    @click="handleEditDetail(scope.row)"
                                />
                                <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    circle
                                    @click="handleDeleteDetail(scope.row)"
                                />
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="pagination">
                        <Pagination
                            :hanleChangeCurrentPage="hanleChangeCurrentPageDetail"
                            :handleChangeSize="handleChangeSizeDetail"
                            :currentPage="currentPageDetail"
                            :pageSize="pageSizeDetail"
                            :total="totalDetail"
                        />
                    </div>
                </el-col>
            </el-row>
        </div>

        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="Show"
            append-to-body
            center
            width="500px"
        >
            <div slot="title">{{EditTitle}}</div>
            <el-form
                :model="Edit"
                class="menu-setting"
                label-position="right"
                ref="Edit"
                label-width="110px"
                :rules="formRules"
                size="small"
            >
                <el-form-item label="字典名称" prop="dictName">
                    <el-input v-model="Edit.dictName" placeholder="请输入" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="字典编码" prop="dictValue">
                    <el-input
                        v-model="Edit.dictValue"
                        placeholder="请输入"
                        :disabled="Edit.id ? true : false"
                        style="width: 200px;"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="Show = false"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitEdit"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="ShowDetail"
            append-to-body
            center
            width="700px"
        >
            <div slot="title">{{EditTitleDetail}}</div>
            <el-form
                :model="EditDetail"
                class="menu-setting"
                label-position="right"
                ref="EditDetail"
                label-width="90px"
                :rules="formRulesDetail"
                size="small"
            >
                <el-form-item label="字典编码" prop="dictValue">
                    <el-input
                        v-model="EditDetail.dictValue"
                        placeholder="请输入"
                        disabled
                        style="width:100%;"
                    />
                </el-form-item>
                <el-form-item label="名称" prop="label">
                    <el-input v-model="EditDetail.label" placeholder="请输入" style="width: 100%;" />
                </el-form-item>
                <el-form-item label="值" prop="code">
                    <el-input v-model="EditDetail.code" placeholder="请输入" style="width: 100%;" />
                </el-form-item>
                <!-- <el-form-item label="描述" prop="remark">
                    <el-input v-model="EditDetail.remark" placeholder="请输入"  style="width: 200px;"/>
                </el-form-item>-->
                <!--<el-form-item label="状态">-->
                <!--<el-radio-group v-model="EditDetail.status">-->
                <!--<el-radio :label="0">有效</el-radio>-->
                <!--<el-radio :label="1">无效</el-radio>-->
                <!--</el-radio-group>-->
                <!--</el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="ShowDetail = false"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitEditDetail"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="ShowImport"
            append-to-body
            center
            width="500px"
            @close="cancelClick"
        >
            <div slot="title">响应码导入</div>
            <!-- <input type="file" ref="input" id="fileupload" @input="upload" /> -->
            <YsUpload ref="YsUpload" :actionUrl="actionUrl" @getInitData="getInitData"></YsUpload>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="cancelClick"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="handleImport"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import YsUpload from '@/components/YsUpload/YsUpload.vue';
import request from '@/apis/request';

export default {
    name: 'dictManagement',
    components: {
        Pagination,
        YsUpload
    },
    data() {
        return {
            formData: {
                dictName: '',
                dictValue: '',
            },
            formDataDetail: {
                label: '',
                code: '',
            },
            // 新增字典字段
            Edit: {
                dictName: null,
                dictValue: null,
            },
            EditTitle: '',
            // 新增字典详情字段
            EditDetail: {
                label: null,
                dictValue: null,
                code: null,
                remark: '', // 描述
                status: 0,
            },
            EditTitleDetail: '',
            Show: false,
            ShowDetail: false,
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            formRules: {
                dictName: [
                    { required: true, message: '请输入字典名称', trigger: 'blur' },
                    // { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
                dictValue: [
                    { required: true, message: '请输入字典编码', trigger: 'blur' },
                    { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
            },
            formRulesDetail: {
                label: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    // { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
                dictValue: [
                    { required: true, message: '请输入租户联系人', trigger: 'blur' },
                    // { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请输入值', trigger: 'blur' },
                    // { max: 30, message: '字符最大长度为30', trigger: 'blur' },
                ],
            },
            // 当前页码
            currentPage: 1,
            // 页码大小
            pageSize: 10,
            // 总数
            total: 0,
            // 当前页码
            currentPageDetail: 1,
            // 页码大小
            pageSizeDetail: 10,
            // 总数
            totalDetail: 0,
            // 表格内容
            tableData: [],
            // 表格内容
            tableDataDetail: [],
            selections: [],
            rowObj: {},
            dictValue: '',
            ShowImport: false,
            actionUrl: "/iccsrv/sys/dictdetail/respCodeImport",
        };
    },
    mounted() {
        this.getInitData(this.formData);
    },
    methods: {
        // 获取字典表格数据
        getInitData(form) {
            let params = {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
            };
            params = Object.assign({}, params, form);
            this.$post.Dict.searchDict(params)
                .then((res) => {
                    if (res.data.success) {
                        this.tableData = res.data.content.dictList;
                        this.total = res.data.content.dictCount;
                    }
                });
        },
        handleSelectChange(val) {
            this.selections = val;
        },
        // 点击某一行查询详情
        handleClick(row, flag) {
            this.dictValue = row.dictValue;
            this.rowObj = row;
            if (flag) {
                this.currentPageDetail = 1;
                this.pageSizeDetail = 10;
            }
            const params = {
                pageNum: this.currentPageDetail,
                pageSize: this.pageSizeDetail,
                dictValue: row.dictValue,
                lesseeCode: row.lesseeCode,
                label: row.label,
                code: row.code,
            };
            this.$post.dictDetail.getDictDetail(params)
                .then((res) => {
                    if (res.data.success) {
                        this.tableDataDetail = res.data.content.dictDetailList;
                        this.totalDetail = res.data.content.total;
                    }
                });
            console.log(this.currentPageDetail);
        },
        // 点击搜索
        hanlesearch() {
            this.currentPage = 1;
            this.pageSize = 10;
            this.getInitData(this.formData);
            this.tableDataDetail = [];
            this.totalDetail = 0;
        },
        // 点击重置
        handleReset() {
            this.formData = {
                dictName: '',
                dictValue: '',
            };
            this.getInitData(this.formData);
            this.tableDataDetail = [];
            this.totalDetail = 0;
        },
        // 点击搜索
        hanlesearchDetail() {
            this.currentPageDetail = 1;
            this.pageSizeDetail = 10;
            const params = Object.assign({}, this.rowObj, this.formDataDetail);
            this.handleClick(params, true);
        },
        // 点击重置
        handleResetDetail() {
            this.formDataDetail = {
                label: '',
                code: '',
            };
            const params = Object.assign({}, this.rowObj, this.formDataDetail);
            this.handleClick(params, true);
        },
        // 点击新增
        hanlePush() {
            this.EditTitle = '添加字典';
            this.Edit = {};
            this.Show = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 点击新增详情
        hanlePushDetail() {
            this.EditTitleDetail = '添加字典详情';
            this.EditDetail = {
                status: 0,
                dictValue: this.dictValue,
            };
            this.ShowDetail = true;
            // 解决一进来就进行表单验证问题
            if (this.$refs.EditDetail) {
                this.$refs.EditDetail.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.EditDetail.resetFields();
                });
            }
        },
        // 点击编辑
        handleEdit(row) {
            this.EditTitle = '修改字典';
            this.Edit = JSON.parse(JSON.stringify(row));
            this.Show = true;
            // // 解决一进来就进行表单验证问题
            if (this.$refs.Edit) {
                this.$refs.Edit.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.Edit.resetFields();
                });
            }
        },
        // 点击编辑详情
        handleEditDetail(row) {
            this.EditTitleDetail = '修改字典详情';
            this.EditDetail = JSON.parse(JSON.stringify(row));
            this.EditDetail.dictValue = this.dictValue;
            this.ShowDetail = true;
            if (this.$refs.EditDetail) {
                this.$refs.EditDetail.resetFields();
            } else {
                this.$nextTick(() => {
                    // this.$refs.EditDetail.resetFields();
                });
            }
        },
        // 单个删除字典
        handleDelete(row) {
            this.$confirm('确认删除该字典？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.Dict.deleteDict({ id: row.id })
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.tableData.length === 1) {
                                    this.currentPage = this.currentPage - 1;
                                }
                                this.getInitData(this.formData);
                                this.tableDataDetail = [];
                                this.totalDetail = 0;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 单个删除字典详情
        handleDeleteDetail(row) {
            this.$confirm('确认删除该字典？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.dictDetail.deleteDictDetail({ id: row.id })
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.tableDataDetail.length === 1) {
                                    this.currentPageDetail = this.currentPageDetail - 1;
                                }
                                this.handleClick(this.rowObj, false);
                            } else {
                                this.$message.error('删除失败！');
                            }
                        });
                })
                .catch(() => {
                });
        },
        // 批量删除
        hanleBatchDeleteDetail() {
            if (this.selections.length <= 0) {
                this.$message.warning('至少选择一项进行删除！');
                return;
            }
            const arr = [];
            this.selections.forEach((item) => {
                arr.push(item.id);
            });
            this.$confirm('确认删除该字典？', '提示', { customClass: 'warning', type: 'warning' })
                .then(() => {
                    this.$post.dictDetail.deleteDictDetailBatch(arr)
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('删除成功！');
                                if (this.tableDataDetail.length === 1) {
                                    this.currentPageDetail = this.currentPageDetail - 1;
                                }
                                this.handleClick(this.rowObj, false);
                            } else {
                                this.$message.error('删除失败！');
                            }
                        });
                })
                .catch(() => {
                });
        },

        // 导入
        clickImport() {
            if (!this.rowObj.dictValue) {
                this.$message.warning('请选择左侧字典编码！');
                return;
            }
            this.ShowImport = true;
        },

        downloadFile() {
            const url = '/iccsrv/custlabel/download';
            request({
                url,
                method: 'get',
                responseType: 'blob',
                params: 'codeDictTemplate.xlsx',
            }).then((res) => {
                // console.log(res, '相应报文')
                const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
                const a = document.createElement('a');
                a.style.display = 'none';
                a.download = '字典模板.xlsx';
                a.href = blobUrl;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        },
        // 导入点击确定按钮
        handleImport() {
            this.$refs.YsUpload.submitupload();
        },
        // 取消
        cancelClick() {
            this.$refs.YsUpload.clearFilesFun();
            this.ShowImport = false;
        },
        // 新增租户点击确定按钮
        submitEdit() {
            if (this.Edit.id) {
                // 编辑
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        this.$post.Dict.updateDict(this.Edit)
                            .then((res) => {
                                if (res.data.success) {

                                    this.getInitData(this.formData);
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            } else {
                // 添加
                this.$refs.Edit.validate((valid) => {
                    if (valid) {
                        this.$post.Dict.addDict(this.Edit)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('添加成功！');
                                    this.getInitData(this.formData);
                                    this.tableDataDetail = [];
                                    this.totalDetail = 0;
                                    this.Show = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            }
        },
        // 新增租户点击确定按钮
        submitEditDetail() {
            if (this.EditDetail.id) {
                // 编辑
                this.$refs.EditDetail.validate((valid) => {
                    if (valid) {
                        this.$post.dictDetail.updateDictDetail(this.EditDetail)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('修改成功！');
                                    this.handleClick(this.rowObj, false);
                                    this.ShowDetail = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            } else {
                // 添加
                this.$refs.EditDetail.validate((valid) => {
                    if (valid) {
                        this.$post.dictDetail.addDictDetail(this.EditDetail)
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('添加成功！');
                                    this.handleClick(this.rowObj, true);
                                    this.ShowDetail = false;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    } else {
                        this.$message.warning('请完成表单填写！');
                    }
                });
            }
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.getInitData(this.formData);
            this.tableDataDetail = [];
            this.totalDetail = 0;
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.getInitData(this.formData);
            this.tableDataDetail = [];
            this.totalDetail = 0;
        },
        // 页码切换方法
        hanleChangeCurrentPageDetail(val) {
            this.currentPageDetail = val;
            this.handleClick(this.rowObj, false);
        },
        // 切换分页大小方法
        handleChangeSizeDetail(val) {
            this.pageSizeDetail = val;
            this.handleClick(this.rowObj, false);
        },
    },
};
</script>

<style  lang="scss">
.downloadClass {
    margin-left: 18%;
    color: #409eff;
}
.container {
    width: 100%;
    height: 100%;
    /*  */
    .dictmanageMain {
        width: 100%;
        background: #fff;
        // border-radius:5px;
        /* padding: 20px; */
        box-sizing: border-box;
        text-align: left;
        .tableTitle {
            width: 100%;
            height: 48px;
            border: 1px solid #eee;
            border-bottom: none;
            line-height: 48px;
            margin-top: 20px;
            color: #666;
        }
        .pagination {
            margin-top: 20px;
            text-align: right;
        }
    }
}
</style>
